#include("/admin/common/header.html")
#include("/admin/common/footer.html")
#include("/admin/common/left.html")
#include("/admin/common/layout.html") 
 
 #@layout()
 #define content()

<span class="layui-breadcrumb">
  <a href="#(ctx_path)/">首页</a>
  <a href="#(ctx_path)/admin/websiteColumn"><cite>我的栏目</cite></a>
</span>

<hr>
<br/>

<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-sm1">
			&nbsp;
		</div>
		<div class="layui-col-sm3">
		
			<div class="layui-form-item">
					<button class="layui-btn layui-btn-small layui-btn-danger" onclick="initForm();">新增栏目</button>
				</div>
		
			<ul id="treeElem"></ul>
		</div>
		<div class="layui-col-sm6">
			<form class="layui-form">
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			
				<input type="hidden" name="id" value="">
				<input type="hidden" name="parentId" value="">
			
				<div class="layui-form-item">
					<div class="layui-inline" id="treeSelect" >
						<label class="layui-form-label">父栏目</label>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">栏目名称</label>
					<div class="layui-input-block">
						<input type="text" name="name" placeholder="请输入" value=""
							autocomplete="off" class="layui-input" 
							lay-verify="required">
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label">栏目代码</label>
					<div class="layui-input-block">
						<input type="text" name="code" placeholder="请输入" value=""
							autocomplete="off" class="layui-input" 
							lay-verify="required">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-block">
						<input type="text" name="px" placeholder="请输入" value=""
							autocomplete="off" class="layui-input" 
							lay-verify="number">
					</div>
				</div>
			
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" class="layui-textarea" name="comment"></textarea>
					</div>
				</div>
			
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="detailForm">保存</button>
						<button class="layui-btn layui-btn-primary" type="button" onclick="doDelete();">删除</button>
					</div>
				</div>
				<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
			
			
			</form>
		</div>
	</div>
</div>

#end

#define js()

<script>

var nodes=[];

function initForm(node){
	if(!node){
		node={};
	}
	$(":input[name='id']").val(node.id);
	$(":input[name='parentId']").val(node.parentId);
	$(":input[name='name']").val(node.name);
	$(":input[name='code']").val(node.code);
	$(":input[name='px']").val(node.px);
	$(":input[name='comment']").val(node.comment);
	
	layui.use('treeSelect',function(){
		var treeSelect=layui.treeSelect;
		treeSelect.init("#treeSelect",{
			nodes:nodes,
			data:node.parentId
		});
	});
	
	layui.form.render();//为了解决单选和多选以及select没有正确的样式的
}

function initTree(){
	$("#treeElem").html("");
	$.ajax({
		type:'get',
		url:'#(ctx_path)/admin/websiteColumn/tree',
		data:'',
		success:function(data){
			if(data.code=='0'){
				nodes=data.data;
				
				layui.use('tree', function(){
					layui.tree({
						elem:'#treeElem',
						click:function(item){
							initForm(item);
						},
						nodes:data.data
					});
				});
			}
		}
	});
}

function doDelete(){
	
	var id=$("form").find(":input[name='id']").val();
	if(id==""){
		layer.msg('请先选中栏目！', {
			time : 1000
		}, function() {
			
		});
		return;
	}
	
	layui.layer.confirm('确认删除么?', function(index){
		$.ajax({
			type:'get',
			url:'#(ctx_path)/admin/websiteColumn/delete',
			data:"id="+id,
			success:function(data){
				initTree();
				initForm();
			}
		});
		layui.layer.close(index);
	}); 
	
}

initTree();

layui.use('form',function(){
	var form = layui.form;
	form.on('submit(detailForm)', function(data) {
		
		//每次提交前，更新下parentId的值
		var data=layui.treeSelect.getData("#treeSelect");
		var parentId="";
		for(var i=0;i<data.length;i++){
			if(data[i]!=""){
				//取最后一个不为空的select为parentId
				parentId=data[i];
			}
		}
		$(":input[name='parentId']").val(parentId);
		
		//建议使用ajax在此处提交。
		$.ajax({
			type : 'post',
			url : '#(ctx_path)/admin/websiteColumn/save',
			data : $("form").serialize(),
			success : function(data) {
				if (data.code == "0") {
					layer.msg('保存成功！', {
						time : 600
					}, function() {
						initTree();
						initForm();
					});
				}else if(data.code == "1"){
					layer.msg('保存失败，资源代码已存在！！', {
						time : 600
					}, function() {
						
					});
				}
			}
		});
		//此处使用异步的好处，服务器端可以直接验证，如果直接提交，提交完成以后，如果验证不通过，那么不方便处理错误的信息
		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
});

</script>

#end


